<html>
<head>

<style type="text/css">
	html, body {
		border: 0;
		padding: 0;
		margin: 0;
		top: 0;
		left: 0;
	}

</style>


<script type="text/javascript">

var game;
var Systems = {};

var assetManifest = [
	{type: 'fragmentShader', name: 'frag', src: 'assets/shaders/fragment.glsl' },
	{type: 'vertexShader', name: 'vert', src: 'assets/shaders/vertex.glsl' },
	
	{type: 'fragmentShader', name: 'terrain', src: 'assets/shaders/terrain-frag.glsl' },
	{type: 'fragmentShader', name: 'sprite', src: 'assets/shaders/sprite-frag.glsl' },
	{type: 'vertexShader', name: 'terrain', src: 'assets/shaders/terrain-vert.glsl' },
	{type: 'vertexShader', name: 'sprite', src: 'assets/shaders/sprite-vert.glsl' },
	
	{type: 'json', name: 'sdf_data', src: 'assets/sdf-output.json' },
	{type: 'image', name: 'sdf_data', src: 'assets/sdf-output-1.png' },
	{type: 'imageArray', name: 'sprites', stripPath: true, src: [
		'assets/textures/sprites/marker-blue.png',
		'assets/textures/sprites/marker-brown.png',
		'assets/textures/sprites/marker-cyan.png',
		'assets/textures/sprites/marker-gray.png',
		'assets/textures/sprites/marker-green.png',
		'assets/textures/sprites/marker-orange.png',
		'assets/textures/sprites/marker-pink.png',
		'assets/textures/sprites/marker-purple.png',
		'assets/textures/sprites/marker-red.png',
		'assets/textures/sprites/marker-teal.png',
		'assets/textures/sprites/marker-yellow.png',
	]},
	{type: 'imageArray', name: 'terraintex', stripPath: true, src: [
		'assets/textures/terrain/grass-base.png',
		'assets/textures/terrain/grass-yellow-flowers.png',
		'assets/textures/terrain/pavement.png',
		'assets/textures/terrain/dirt.png',
		'assets/textures/terrain/concrete.png',
		'assets/textures/terrain/sidewalk-v.png',
		'assets/textures/terrain/sidewalk-h.png',
// 		'assets/textures/terrain/gravel.png',
	]},
	
	
]



var gl;

// document.addEventListener("DOMContentLoaded", function() {
window.addEventListener("load", function() {
	var glcanvas = document.getElementById('canvas');
	gl = glcanvas.getContext("webgl2");
	
	var w = window.innerWidth;
	var h = window.innerHeight;
	console.log(w,h);
	
	glcanvas.width = window.innerWidth;
	glcanvas.height = window.outerHeight;
	glcanvas.style.width = window.innerWidth + 'px';
	glcanvas.style.height = window.innerHeight + 'px';
	
	gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
	
	loadAssets(assetManifest, function(err, a) {
		main(a);
	});
});
</script>

<script type="text/javascript" src="3rd_party/gl-matrix-min.js"></script>
<script type="text/javascript">
(function(m) { // globalize glMatrix
	for(var p in m) {
		this[p] = m[p];
	}
})(glMatrix);
</script>

<script type="text/javascript" src="3rd_party/json5.min.js"></script>
<script type="text/javascript" src="glcore.js"></script>
<script type="text/javascript" src="sprite.js"></script>
<script type="text/javascript" src="terrain.js"></script>
<script type="text/javascript" src="maputil.js"></script>
<script type="text/javascript" src="main.js"></script>

<script type="text/javascript" src="systems/movement.js"></script>


<script type="text/javascript">

</script>

</head>
<body>
	<canvas id="canvas">Loading...</canvas>
	
	<div id="hidden" style="display:none;"></div>
</body>
</html>
